import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pet_app/base/base_list_view.dart';
import 'package:pet_app/components/ArcPainter.dart';
import 'package:pet_app/components/back_btn/view.dart';
import 'package:pet_app/model/article.dart';
import 'package:pet_app/widget/KeepAliveWrapper.dart';
import 'package:pet_app/widget/app_net_image.dart';

import 'logic.dart';

class ArticlePage extends BaseListView<ArticleLogic> {
  ArticlePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Container(
      child: buildContent(),
    ));
  }

  @override
  Widget buildContent() {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(color: controller.mainColor),
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
            child: Row(
              children: [
                BackBtnComponent(
                  bgColor: controller.mainColor.withOpacity(0.8),
                ),
                const Expanded(child: SizedBox()),
                Padding(
                  padding: const EdgeInsets.only(right: 4.0),
                  child: Text(
                    controller.name,
                    style: TextStyle(
                      fontSize: 28,
                      color: Colors.white,
                      shadows: <Shadow>[
                        Shadow(
                          offset: const Offset(2.0, 2.0),
                          blurRadius: 3.0,
                          color: Colors.grey.withOpacity(0.3),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                    color: controller.mainColor,
                    borderRadius: const BorderRadius.only(
                        bottomLeft: Radius.circular(32),
                        bottomRight: Radius.circular(32))),
                height: 60,
              ),
              Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: CustomPaint(
                    painter: ArcPainter(controller.mainColor),
                    child: Container(
                      height: 0,
                    ),
                  )),
              GetBuilder<ArticleLogic>(builder: (logic) {
                return createRefresherListView(
                    controller,
                    (baseLogic) => ListView.builder(
                          itemCount: controller.articleList.length,
                          itemBuilder: (BuildContext context, int index) =>
                              _buildItem(controller.articleList[index],
                                  controller.mainColor,controller),
                        ));
              })
            ],
          ),
        ),
      ],
    );
  }
}

Widget _buildItem(Article article, Color mainColor, ArticleLogic logic) {
  return GestureDetector(
    onTap: () => logic.toArticleDetailPage(article),
    child: Card(
      margin: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 16),
      clipBehavior: Clip.antiAlias,
      surfaceTintColor: Colors.white,
      elevation: 4,
      shadowColor: mainColor.withOpacity(0.6),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipRRect(
              borderRadius: const BorderRadius.all(Radius.circular(8)),
              child: KeepAliveWrapper(child: AppNetImage(imageUrl: article
                  .imageUrl!+'?x-oss-process=image/resize,p_30')),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(bottom: 16, top: 8,left: 16,right: 16),
            child: Text(
              article.title!,
              style: TextStyle(color: Colors.black.withOpacity(0.7)),
            ),
          )
        ],
      ),
    ),
  );
}
